<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<jsp:include page="header.jsp">
	<jsp:param name="pageTitle" value="${community.name}" />
</jsp:include>
<script type="text/javascript">
	var stuffId = ${stuff.id};
	var communityId = ${community.id};
	var contributeObj;
</script>
<c:if test="${not empty sessionUser}">
	<script type="text/javascript">
		 $(function() {
			// contribute to stuff method		
			$("#contributeStuffButton")
					.click(
							function() {
								
								contributeObj = {
									activityID : stuffId,
									amountContributed : $("#stAmountContributed").val(),
									userPhone : $("#stPhone").val()
								};
								 
								console.log(JSON.stringify(contributeObj));
								$
										 .ajax({
											url : "contribute",
											type : "POST",
											data : JSON.stringify(contributeObj),
											contentType : "application/json",
											accepts : "application/json"
										}) 
										.done(
												function(s) {
													if (s == null) {
														console
																.alert("Please fill the required fields.");
														return;
													}
													console
															.log("success for add stuff "
																	+ s);

													$("#contributeStuff")
															.modal('hide');
												})
										.error(
												function(e) {
													contributeObj = e;
													console
															.log("error for contribute stuff "
																	+ e);
													alert("An error occurred. Please try again.");
												});
							}); 
		}); 
	</script>
</c:if>
<style type="text/css">
.datepicker {
	z-index: 1151 !important;
}

.container-fluid {
	margin-top: 40px;
	padding-bottom: 50px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.left-clm-comm-detail {
	position: relative;
	min-height: 1px;
}

.label-comm-name-detail {
	color: #f05607;
	display: inline;
	text-align: center;
	font-size: 16px;
}

.label-stuff-name-detail {
	color: #f05607;
	display: inline;
	text-align: center;
	font-size: 20px;
}

.label-welcome {
	color: #f05607;
	display: inline;
	text-align: center;
	font-size: 20px;
}

.comm-detail,.comm-name-detail {
	border: auto;
	border: 1px solid #E8EDED;
	padding: 10px 40px;
	background: #FFFFFF;
	width: 100%;
	border-radius: 25px;
	margin: 3px 3px;
	position: relative;
}

.stuff-detail,.stuff-name-detail {
	border: auto;
	border: 5px solid #E8EDED;
	padding: 10px 40px;
	background: #FFFFFF;
	width: 100%;
	border-radius: 25px;
	margin: 3px 3px;
	position: relative;
}

.member {
	margin-top: 30px;
	width: 100%;
	height: 40px;
	font-size: x-large;
}

.right-stuff-detail-number {
	color: #f05607;
	font-size: 80px;
	line-height: 40px;
}

.right-stuff-detail-explanation {
	color: #f05607;
	font-size: 14px;
	line-height: 40px;
}

#stuffDetail {
	margin-top: 30px;
}

.btn-group-vertical {
	padding: 10px 40px;
	width: 30%;
	margin: 3px 3px;
	position: relative;
	float: right;
	right: 27px;
}
</style>
<div class="container-fluid">

	<div class="row">
		<!-- Left column for description -->
		<div class="col-md-3 no-float left-clm-comm-detail">
			<div class="comm-name-detail">
				<label class="label-comm-name-detail">${community.name}</label>
			</div>
			<div class="comm-detail">
				<td>${community.description}</td>
			</div>
			<c:if test="${not empty sessionUser}">
			</c:if>
		</div>
		<!-- details of the stuff -->
		<div class="col-md-9 no-float">
			<div class="row">
				<div class="col-md-8 no-float">
					<fmt:formatNumber var="completeRate"
						value="${stuff.amountContributed/stuff.amountRequested * 100}"
						maxFractionDigits="2" />
					<div class="col-md-11 stuffItem">
						<p>
							<strong class="label-stuff-name-detail">${stuff.name}</strong> <strong
								class="pull-right text-muted label-stuff-name-detail">${completeRate}%
								Complete</strong>
						</p>
						<div class="progress progress-striped active">
							<div class="progress-bar progress-bar-primary" role="progressbar"
								aria-valuemin="0" aria-valuemax="${stuff.amountRequested}"
								style="width:${stuff.amountContributed/stuff.amountRequested * 100}%">
							</div>
						</div>

						<%-- <div class="stuff-detail">
							<td>${stuff.amountRequested}</td>
						</div> --%>
						<%-- <div class="stuff-name-detail">
							<label class="label-comm-name-detail">${stuff.name}</label>
						</div> --%>
						<div class="stuff-detail">
							<td>${stuff.description}</td>
						</div>
						<div class="stuff-detail">
							<td>${stuff.datetime}</td>
						</div>
						<div class="stuff-detail">
							<td>${stuff.location}</td>
						</div>
					</div>
					<c:if test="${not empty sessionUser}">
						<div class="btn-group-vertical" role="group" aria-label="...">
							<a href="#" data-toggle="modal" type="button" align="center"
								class="btn btn-lg btn-primary" data-target="#contributeStuff">Contribute
							</a>
						</div>
					</c:if>
				</div>
				<div class="col-md-3 no-float">
					<div class="col-md-3 stuffItem" id="stuffDetail">
						<div>
							<strong class="right-stuff-detail-number">${stuff.amountContributed}</strong>
						</div>
						<div>
							<strong class="right-stuff-detail-explanation">&nbsp;collected</strong>
						</div>
						</br>
						<div>
							<strong class="right-stuff-detail-number">${stuff.amountRequested}</strong>
						</div>
						<div>
							<strong class="right-stuff-detail-explanation">&nbsp;requested</strong>
						</div>
					</div>
				</div>
			</div>
			<!-- activity feed column -->
			<div class="row">
				<div id="allActivities" style="margin-left: 18px; margin-top:20px;">
					<c:choose>
						<c:when test="${feedItems.size() == 0}">
							<span id="noActivities">There is no activity.</span>
						</c:when>
						<c:otherwise>
							<c:forEach var="fi" items="${feedItems}">
								<div class="row">${fi.userName}
									contributed
									<c:if test="${not empty fi.insertionDate}"> at ${fi.insertionDate} </c:if>
									with the amount of <strong>${fi.amountContributed} </strong>.
								</div>
								<br>
							</c:forEach>
						</c:otherwise>
					</c:choose>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="contributeStuff" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">Contribute to
					${stuff.name} Stuff in ${community.name}</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label for="stAmountContributed" class="control-label">Contributed
						Amount</label> <input type="number" id="stAmountContributed"
						class="form-control" required="required" />
				</div>
				<div class="form-group">
					<label for="stName" class="control-label">Name</label> <input
						type="text" id="stName" class="form-control" value="${stuff.name}"
						readonly="readonly" required="required" />
				</div>
				<div class="form-group">
					<label for="stEmail" class="control-label">E-mail</label> <input
						type="text" id="stEmail" value="${sessionUser.email}" class="form-control" required="required" />
				</div>
				<div class="form-group">
					<label for="stPhone" class="control-label">Phone Number</label> <input
						type="text" id="stPhone" class="form-control" required="required" />
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
				<button type="button" class="btn btn-primary"
					id="contributeStuffButton">Contribute</button>
			</div>
		</div>
	</div>
</div>


</body>
</html>
